<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2021-12-06 14:07:23
 * @LastEditTime: 2022-07-28 09:49:19
-->
<template>
  <Tooltip
    v-if="tooltip"
    transfer
    style="width: 100%"
    :content="option.tipsTxt != null && option.tipsTxt != undefined ? option.tipsTxt : text"
    :placement="option.placement ? option.placement : 'top'"
    :theme="option.theme || 'dark'">
    <div class="text" :style="style" v-html="text"></div>
    <template #content v-if="option.tipsHtml">
      <div v-html="option.tipsHtml" style="padding: 5px; border: 1px solid #e8eaec"></div>
    </template>
  </Tooltip>
  <div v-else class="text" :style="style" v-html="text"></div>
</template>

<script>
  import textMgr from './text.js'
  export default {
    props: {
      option: Object,
      value: [String, Number]
    },
    watch: {
      option(n, o) {
        this.update()
      },
      value(n) {
        this.update()
      }
    },
    data() {
      return {
        tooltip: false,
        style: {},
        text: '-'
      }
    },
    mounted() {
      this.update()
    },
    methods: {
      update() {
        this.style = textMgr.style(this.option)
        this.text = textMgr.handle(this.option, this.value)
        this.tooltip = this.option.tooltip != null ? this.option.tooltip : this.text.length > (this.option.max || 10)
      }
    }
  }
</script>

<style>
  .elx-table--tooltip-wrapper {
    z-index: 3001 !important;
  }

  .ivu-tooltip-rel {
    vertical-align: bottom;
  }

  .ivu-tooltip-inner {
    max-width: 500px !important;
  }

  .text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
